<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/css/common.css}" rel="stylesheet"/>
</head>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form" lay-filter="searchForm">
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label" for="username">姓名</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="username" name="username" autocomplete="off"
                               placeholder="请输入姓名">
                    </div>
                    <label class="layui-form-label" for="idCard">身份证</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="idCard" name="idCard" autocomplete="off"
                               placeholder="请输入身份证">
                    </div>
                    <label class="layui-form-label" for="type">学院</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="college" name="college" autocomplete="off"
                               placeholder="请输入学院">
                    </div>
                    <label class="layui-form-label" for="major">专业</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="major" name="major" autocomplete="off"
                               placeholder="请输入专业">
                    </div>
                </div>
                <div class="layui-form-item layui-form-pane">
                    <label class="layui-form-label" for="grade">年级</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="grade" name="grade" autocomplete="off"
                               placeholder="请输入年级">
                    </div>
                    <label class="layui-form-label" for="classNo">班级</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" id="classNo" name="classNo" autocomplete="off"
                               placeholder="请输入班级">
                    </div>
                    <label class="layui-form-label" for="type">贫困类型</label>
                    <div class="layui-input-inline">
                        <select id="type" name="type">
                            <option value="">请选择类型</option>
                            <option value="1">因病致贫</option>
                            <option value="2">因灾致贫</option>
                            <option value="3">低保</option>
                            <option value="4">农村低收入子女</option>
                            <option value="5">特困子女</option>
                            <option value="6">烈士子女</option>
                            <option value="7">少数民族家庭经济困难子女</option>
                        </select>
                    </div>
                    <label class="layui-form-label" for="status">审核状态</label>
                    <div class="layui-input-inline">
                        <select id="status" name="status">
                            <option disabled>请选择审核状态</option>
                            <option value="3">审核通过</option>
                            <option value="4">审核不通过</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="searchBtn"
                                id="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button class="layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="resetBtn">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                </div>
            </div>
            <table class="layui-table" id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="toolbar">
                <button class="layui-btn layui-btn-xs layui-btn-text" lay-event="visitVoice">
                    <i class="layui-icon layui-icon-edit">查看回访录音</i>
                </button>
                <button class="layui-btn layui-btn-xs layui-btn-text" lay-event="overdue">
                    <i class="layui-icon layui-icon-edit">加入失信名单</i>
                </button>

            </script>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(["table", "form","upload"], () => {
        const table = layui.table, form = layui.form, $ = layui.$;

        const cols = [[
            {type: "numbers"},
            {title: "姓名", field: "username",width: 100,align: 'center'},
            {title: "性别", field: "gender",width: 80,align: 'center'},
            {title: "邮箱", field: "mail",width: 170,align: 'center'},
            {title: "电话号码", field: "phone",width: 150,align: 'center'},
            {title: "身份证", field: "idCard",width: 200,align:'center'},
            {title: "学院", field: "college",width: 200,align:'center'},
            {title: "专业", field: "major",width: 150,align: "center"},
            {title: "年级", field: "grade",width: 100,align: 'center'},
            {title: "班级", field: "classNo",width: 100,align: 'center'},
            {title: "贫困类型", field: "type",templet:function (e) {
                    if(e.type == 1){
                        return "因病致贫";
                    }else if(e.type == 2){
                        return "因灾致贫";
                    }else if(e.type == 3){
                        return "低保";
                    }else if(e.type == 4){
                        return "农村低收入子女";
                    }else if(e.type == 5){
                        return "特困子女";
                    }else if(e.type == 6){
                        return "烈士子女";
                    }else if(e.type == 7){
                        return "少数民族家庭经济困难子女";
                    }
                },width: 150,align: "center"},
            {title: "贷款年限", field: "loanYears",width: 100,align: "center"},
            {title: "代还款", field: "owingAmount",width: 100,align: 'center'},
            {title: "状态", field: "state",width: 100,align: 'center',style:'color:red;'},
            {title: "还款状态", field: "overdue",width: 100,align: 'center',style:'color:red;'},
            {title: "审核时间", field: "adminTime",width: 180,align: "center"},
            {title: "回访路径", field: "visitVoicePath",width: 180,align: "center"},
            {title: "驳回原因", field: "refuseReasons",width: 180,align: "center"},
            {title: "创建时间", field: "createTime",width: 180,align: "center"},
            {title: "修改时间", field: "updateTime",width: 180,align: "center"},
            {title: "操作栏", toolbar: "#toolbar", fixed: "right", width: 300,align: "center"}
        ]];

        const dataTable = table.render({
            elem: "#dataTable",
            height: "600px",
            toolbar: "#tableBar",
            id: "dataTable",
            page: {
                layout:['limit','count','prev','page','next','skip'],
                curr: 1,
                limit: 20
            },
            limit:[5,10,20,30,40,50],
            url: ctx + "loan/loan/getLoanList",
            parseData: ({code, data, msg}) => {
                const {list, total} = data;
                return {
                    "code": code,
                    "msg": msg,
                    "count": total,
                    "data": list
                }
            },
            cols: cols
        });

        form.on("submit(searchBtn)", data => {
            dataTable.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            })
        })

        form.on("submit(resetBtn)", data => {
            form.val("searchForm", {
                username: "",
                idCard: "",
                major: "",
                grade: "",
                classNo: "",
                status: "",
                type: ""
            })
            $("#searchBtn").click();
        })

        table.on("tool(dataTable)", (obj) => {
            const {event, data, tr} = obj;
            switch (event) {
                case "overdue":
                    resetPassword(data);
                    break;
                case 'visitVoice':
                    visitVoice(data);
                    break;
            }
        })

        const visitVoice = (data) => {
            console.log(data);
            var content = '暂无回访录音';
            if(data.visitVoicePath && data.visitVoicePath != null){
                content = '<audio src="'+ data.visitVoicePath + '" controls></audio>';
            }
            layer.open({
                type: 1,
                content:content,
                title:"回访录音",
                area: ['300px', '200px'],
                btn: ['返回']
            })
        }

        const resetPassword = (data) => {
            const url = "loan/belief/save";
            console.log(data)
            layer.confirm("确定要把此用户加入失信名单吗？", () => {
                $.ajax({
                    url: ctx + url,
                    method: "post",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(data),
                    success: ({code, msg}) => {
                        let iconType = 4;
                        if(code !== 0){
                            iconType = 5;
                        }
                        layer.msg(msg, {icon: iconType,time: 3000});
                    }
                })
            })
        }
    });
</script>
</body>
</html>